<template>
  <el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="预览"
             width="50%" @open="open">
    <template v-for="item in list">
      <produce-item :data="item" :key="item.id"/>
    </template>
    <span slot="footer">
        <el-button @click="closeDialog">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import ProduceItem from '@pages/goods/part/pageGoodProduce/ProduceItem'
export default {
  name: 'GoodProduceShowDialog',
  components: { ProduceItem },
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    list: {
      required: true,
      type: [Array]
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  computed: {
  },
  methods: {
    /**
       * 对话框开启拦截
       */
    open () {
      this.resetDialog()
    },
    /**
       * 关闭对话框
       */
    closeDialog () {
      this.dialogVisible = false
    },
    /**
       * 重置数据
       */
    resetDialog () {
    }
  },
  watch: {
    dialogVisible (val) {
      this.$emit('visible', val)
    },
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
